<template>
  <el-dialog v-model="model" @close="closedDialog">
    <jmash-upload-file
      ref="uploadRef"
      drag
      accept=".bpmn20.xml,.zip,.tar.gz,.bpmn"
      :limit="1"
      v-model:file-list="fileList"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖放文件或 <em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip">
          流程文件支持.bpmn , .bpmn20.xml 和 .zip 文件，最大2M.
        </div>
      </template>
    </jmash-upload-file>
    <div style="display: flex; justify-content: flex-end">
      <el-button type="primary" @click="submitForm">{{
        $t("flow.deploy")
      }}</el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const uploadRef = ref(null);

import { useI18n } from "vue-i18n";
const { t } = useI18n();

import type { FlowDeployReq } from "@/api/flow/prodef/types";

import { procDefApi } from "@/api/flow/prodef/index";

let deployReq: FlowDeployReq = reactive<FlowDeployReq>({
  requestId: Math.random() * 10 + "",
});

const emit = defineEmits(["update"]);
const model = defineModel<boolean>();
const fileList = ref([] as any[]);

function submitForm() {
  if (fileList.value.length === 0) {
    ElMessage.info("请先选择上传流程文件");
    return;
  }
  console.log(fileList.value);
  deployReq.resFile = fileList.value[0].response.fileSrc;
  deployReq.name = fileList.value[0].name;
  procDefApi.deployFlow(deployReq).then((res) => {
    if (model.value) {
      model.value = false;
      emit("update", true);
    }
  });
}

// 关闭弹框
function closedDialog() {
  if (model.value) {
    model.value = false;
  }
}
</script>
